<template>
    <div class="crowdFunding">
        <div class='topShow'>
            <img src="https://img.xiaopiu.com/userImages/img566016342de3568.png" alt="">
             <div class="rank boldTxt">
                <p>收益排行:</p>
                <ul>
                    <li>张三：2000</li>
                    <li>李四：1000</li>
                    <li>王五：500</li>
                </ul>
            </div>
        </div>
        <div class="bottomBar por">
                <ul>
                    <li><i></i></li>
                    <li><i></i></li>
                    <li><i></i></li>
                    <li><i></i></li>
                    <li><i></i><i></i></li>
                </ul>
                <div class="progressBar poa" :style="{width:speed/20*1.4+'rem'}">
                    <div class="progressNum  poa">{{speed}}</div>
                </div>
            </div>
        <div class="infoTxt">
            <div class="leftInfo">
                <p class="tit">{{bookname}}</p>
                <div class="author">
                    作者：{{author}}
                </div>
                <div class="date">最近更新：{{updateTime}}</div>
            </div>
            <div class="score">
                <p>本书评分</p>
                <div class="starScore">
                    <img src="../assets/star1.png" alt="" v-for="(item,index) in score">
                    <img src="../assets/star2.png" alt=""  v-for="(item,index) in (parseInt(5)-parseInt(score))">
                </div>
                <div>{{scoreCount}}人</div>
            </div>
            
        </div>
        <div class="txt descTxt">
                本书简介<br/>{{summary}}
            </div>
        <div class="canFund">
            <p>当前可众筹章节</p>
            <ul>
                <li v-for="(item,index) in list" :key="index">
                    <router-link :to='{
                      path:"/Read",
                      query:{
                        id:item.id,
                        bookid:item.book_id
                      }
                    }'>{{item.chp_index}}：{{item.title}}</router-link>
                </li>
            </ul>
        </div>
        <div class="crowd">
            <div class="pay">
                <div class="boldTxt">边看边赚</div>
                <div class="checkicon">
                    <span class="icon-fuxuankuangxuanzhong iconfont"></span>
                    <i>稿酬</i>
                </div>
            </div>
                <button class="goPay" type="button" @click="payOrder">微信支付</button>
        </div>
        
    </div>
</template>

<script>
import axios from "axios";
import url from "@/serviceAPI.config.js";
export default {
  data() {
    return {
      width: "",
      bookname: "", //书籍名称
      summary: "", //本书简介
      author: "", //作者
      updateTime: "", //更新时间
      score: 3, //评分
      // darkStar:0,
      scoreCount: 0, //人数
      speed: 0, //进度
      list: "", //章节
      openID:"",
      planID:""
    };
  },
  created() {
    axios({
      url: url.book + "?id=1",
      methods: "get"
    })
      .then(reponse => {
        if (reponse.status == 200) {
          if (reponse.data.Data) {
            this.bookname = reponse.data.Data.bookname; //书籍名称
            this.summary = reponse.data.Data.summary; //本书简介
            this.author = reponse.data.Data.author; //作者
            this.updateTime = reponse.data.Data.latestTime.substring(0, 10); //更新时间
            this.score = reponse.data.Data.score; //评分
            this.scoreCount = reponse.data.Data.scorecount; //人数
            this.speed = reponse.data.Data.speed; //进度
          }
        }
      })
      .catch(error => {
        alert("网络错误，请稍后再试");
      }),
      axios({
        url: url.list + "?id=1",
        methods: "get"
      })
        .then(reponse => {
          if (reponse.status == 200) {
            if (reponse.data.Data) {
              this.list = reponse.data.Data; //章节
            }
          }
        })
        .catch(error => {
          alert("网络错误，请稍后再试");
        });
  },
  methods: {
    payOrder: function(params) {
      this.openID =  window.localStorage.getItem('Openid');
      axios({
        url: url.pay+"?planid=" + this.$route.query.planId + "&openid=" + this.openID,
        methods: "get"
      })
        .then(reponse => {
            conaole.log(reponse)
          
          if (reponse.status == 200) {
          }
          if (reponse.Code == 20001) {
            window.location.href="http://readerapi.surinch.com/WeChat/WxLogin"
          }
        })
        .catch(error => {
          alert("网络错误，请稍后再试");
        });
    }
  }
};
</script>

<style scoped>
.crowdFunding {
  text-align: center;
  color: #505050;
}

.headerImg .cImg {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  margin-top: 0.4rem;
}

.userName {
  margin: 0.2rem;
  font-size: 0.6rem;
}

.topShow {
  /* border-radius: 0.284rem; */
  width: 7.5rem;
  height: 4.1rem;
  background-color: rgba(241, 234, 234, 1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-around;
  padding-top: 0.3rem;
}

.topShow img {
  width: 3rem;
  height: 3rem;
  margin: 0.07rem 0 0 0.2rem;
}

.progress {
  margin-left: 0.2rem;
}

.progress .rate {
  font-size: 0.5rem;
  color: rgba(34, 32, 32, 1);
  margin: 0.5rem 0 0.3rem 0;
}

.heart1 {
  font-size: 0.42rem;
  color: rgba(184, 99, 99, 1);
}

.heart2 {
  font-size: 0.42rem;
  color: #999;
}

.infoTxt {
  text-align: left;
  padding: 0.2rem;
  display: flex;
  justify-content: space-between;
}
.score {
  width: 2.6rem;
  height: 1.7rem;
  background-color: rgba(186, 179, 179, 1);
  box-shadow: 0 0.16rem 0.16rem 0 rgba(0, 0, 0, 0.5);
  text-align: center;
}
.infoTxt .tit {
  font-size: 0.44rem;
}

.infoTxt .author,
.infoTxt .txt {
  font-size: 0.34rem;
}

.canFund {
  font-size: 0.34rem;
  text-align: left;
  margin-top: 0.3rem;
  margin-left: 0.2rem;
}

.canFund p {
  margin: 0.15rem 0;
}

.canFund li {
  margin-bottom: 0.08rem;
}

.crowd {
  border-radius: 0.284rem;
  width: 7.2rem;
  height: 2rem;
  margin: 0.2rem auto;
  background-color: rgba(241, 232, 232, 1);
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}

.pay {
  margin-left: 0.4rem;
  padding-top: 0.2rem;
}

.boldTxt {
  font-size: 0.36rem;
  font-weight: bold;
}

.checkicon {
  margin: 0.2rem 0;
}

.checkicon span:nth-child(1) {
  font-size: 0.5rem;
  color: #419388;
}

.checkicon i {
  font-size: 0.44rem;
  margin-left: 0.03rem;
}

.goPay {
  display: block;
  border: none;
  color: #fff;
  border-radius: 0.036rem;
  width: 2.856rem;
  height: 0.64rem;
  left: 0.474rem;
  top: 13.102rem;
  background-color: rgba(0, 150, 136, 1);
  -webkit-box-shadow: 0 0.04rem 0.04rem 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0.04rem 0.04rem 0 rgba(0, 0, 0, 0.5);
  margin-right: 0.8rem;
  margin-top: 0.6rem;
}

.rank {
  margin: 0.2rem 0.8rem 0 0;
  font-size: 0.4rem;
  font-weight: normal;
  text-align: left;
}
.rank p {
  padding-top: 0.2rem;
}
.rank li {
  padding-bottom: 0.1rem;
}
.bottomBar {
  position: relative;
  margin-left: 0.25rem;
}

.crowd {
  padding-bottom: 0.5rem;
}

.bottomBar ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 7rem;
  height: 0.1rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bottomBar li {
  width: 1.4rem;
  height: 0.1rem;
  background: #bdbdbd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.bottomBar li i {
  display: block;
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 50%;
  background: #000;
  z-index: 5;
}

.progressBar {
  width: 0;
  max-width: 7.5rem !important;
  height: 0.1rem;
  top: 0;
  left: 0;
  background: #419388;
}

.progressNum {
  top: -0.8rem;
  right: -0.36rem;
  font-size: 0.24rem;
  color: #fff;
  width: 0.7rem;
  height: 0.7rem;
  background: url(../assets/icon1.png);
  background-size: 100%;
  line-height: 0.53rem;
  text-align: center;
}

.progressNum span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.16rem;
  margin-top: -0.3rem;
}
.descTxt {
  text-align: left;
  padding: 0.2rem;
}
.starScore {
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  justify-content: space-around;
  margin: 0.2rem 0;
}
.starScore img {
  width: 0.35rem;
  height: 100%;
}
.leftInfo div {
  font-size: 0.34rem;
  padding: 0.05rem 0;
}
.pay div:nth-child(1) {
  margin: 0.2rem 0;
  font-size: 0.4rem;
}
</style>